<template>
  <div class="slide">
    <el-card class="content1" shadow="never">
      <div slot="header" class="clearfix">
        <span style="font-size: 17px;font-weight: bold">督办状态：待完成</span>
      </div>
      <div>
        <el-table
          style="width: 100%;padding:0 10px"
          stripe
          :row-style="{ height: '51px' }"
          :data="waitCompleted"
        >
          <el-table-column
            show-overflow-tooltip
            prop="title"
            label="督办事项"
            align="left"
            width="230"
          >
            <template slot-scope="scope">
              <a
                class="task_title_a"
                @click="openReport(scope.row)"
                v-if="!scope.row.readStatus"
              >
                <el-badge is-dot class="dot_item"></el-badge>
                {{ scope.row.title }}
              </a>
              <a class="task_title_a" @click="openReport(scope.row)" v-else>{{
                scope.row.title
                }}</a>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="status"
            align="center"
            label="状态"
          >
            <template slot-scope="scope">
              <sz-badge
                :value="scope.row.status | keyText('SUPERVISION_STATUS')"
                type="danger"
              ></sz-badge>
            </template>
          </el-table-column>
          <el-table-column
            width="170"
            label="进度"
            align="center"
            prop="progress"
          >
            <template slot-scope="scope">
              <el-progress :percentage="scope.row.progress"></el-progress>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="createUserName"
            label="创建人"
            align="center"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="categoryName"
            label="事项类型"
            align="center"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="responsiblePerson"
            label="责任人"
            align="center"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="planStartTime"
            label="计划开始日期"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{
                scope.row.planStartTime | formatTime("yyyy-MM-dd")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="planEndTime"
            label="计划结束日期"
            align="center"
          >
            <template slot-scope="scope">
              <span :style="{ color: thisData(scope.row) ? 'red' : '' }">{{
                scope.row.planEndTime | formatTime("yyyy-MM-dd")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="updateTime"
            label="最近更新时间"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column width="15"></el-table-column>
          <div slot="empty" class="empty">
            <div style="position: relative">
              <img
                style="margin-top:10%;margin-bottom: 0;padding-bottom: 0;opacity: 0.5"
                src="@/assets/empty.png"
              />
              <span
                style="margin: 0;display: block;position:absolute;top:150px;left:46%"
              >暂无数据</span
              >
            </div>
          </div>
        </el-table>
      </div>
    </el-card>
    <el-card class="content2" shadow="never">
      <div slot="header" class="clearfix">
        <span style="font-size: 17px;font-weight: bold">督办状态：已完成</span>
      </div>
      <div>
        <el-table
          style="width: 100%;padding:0 10px"
          stripe
          :row-style="{ height: '51px' }"
          :data="completed"
        >
          <el-table-column
            show-overflow-tooltip
            prop="title"
            label="督办事项"
            align="left"
            width="230"
          >
            <template slot-scope="scope">
              <a
                class="task_title_a"
                @click="openReport(scope.row)"
                v-if="!scope.row.readStatus"
              >
                <el-badge is-dot class="dot_item"></el-badge>
                {{ scope.row.title }}
              </a>
              <a class="task_title_a" @click="openReport(scope.row)" v-else>{{
                scope.row.title
                }}</a>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="status"
            align="center"
            label="状态"
          >
            <template slot-scope="scope">
              <sz-badge
                :value="scope.row.status | keyText('SUPERVISION_STATUS')"
                type="success"
              ></sz-badge>
            </template>
          </el-table-column>
          <el-table-column
            width="170"
            label="进度"
            align="center"
            prop="progress"
          >
            <template slot-scope="scope">
              <el-progress :percentage="scope.row.progress"></el-progress>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="createUserName"
            label="创建人"
            align="center"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="categoryName"
            label="事项类型"
            align="center"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="responsiblePerson"
            label="责任人"
            align="center"
          >
          </el-table-column>
          <!--          <el-table-column-->
          <!--            prop="linkUserName"-->
          <!--            label="联系人"-->
          <!--            align="center"-->
          <!--          ></el-table-column>-->
          <el-table-column
            show-overflow-tooltip
            prop="planStartTime"
            label="计划开始日期"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{
                scope.row.planStartTime | formatTime("yyyy-MM-dd")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="planEndTime"
            label="计划结束日期"
            align="center"
          >
            <template slot-scope="scope">
              <span :style="{ color: thisData(scope.row) ? 'red' : '' }">{{
                scope.row.planEndTime | formatTime("yyyy-MM-dd")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="updateTime"
            label="最近更新时间"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column width="15"></el-table-column>
          <div slot="empty" class="empty">
            <div style="position: relative;height:200px">
              <img
                style="margin-top:10%;margin-bottom: 0;padding-bottom: 0;opacity: 0.5"
                src="@/assets/empty.png"
              />
              <span
                style="margin: 0;display: block;position:absolute;top:150px;left:46%"
              >暂无数据</span
              >
            </div>
          </div>
        </el-table>
      </div>
    </el-card>
  </div>
</template>
<script>
  export default {
    created() {
      this.getWaitCompleted();
      this.getCompleted();
    },
    data() {
      return {
        waitCompleted: [],
        completed: []
      };
    },
    methods: {
      thisData(row) {
        return new Date().getTime() >= new Date(row.planEndTime).getTime();
      },
      // 汇报
      openReport(row) {
        this.$router.push({
          path: "/main/supervise/superviseReport",
          query: {matterId: row.id}
        });
      },
      //待完成
      getWaitCompleted() {
        let tem = {pageSize: 5, status: "DOING"};
        this.API.getMySupervisionMatterPageList(tem).then(ret => {
          this.waitCompleted = ret.data.records;
        });
      },
      //已完成
      getCompleted() {
        let tem = {pageSize: 5, status: "COMPLETED"};
        this.API.getMySupervisionMatterPageList(tem).then(ret => {
          this.completed = ret.data.records;
        });
      }
    }
  };
</script>
<style scoped lang="less">
  .slide {
    height: 770px;
    display: flex;
    float: right;
    flex-flow: column;
    width: 77.4%;
  }

  .content1 {
    width: 100%;
    height: 380px;
  }

  .content2 {
    width: 100%;
    height: 380px;
    margin-top: 10px;
  }

  /deep/ .el-card__body {
    padding: 0;
  }

  /deep/ .el-table td,
  .el-table th.is-leaf {
    border-bottom: 0;
  }

  /deep/ .has-gutter {
    color: #99b4ca;
    font-size: 15px;
  }
</style>
